<template>
  <div class="th-back-top" v-show="show" @click="clickBackHandler">
      <span class="bg-back2top2"></span>
  </div>
</template>

<script>
export default {
    name:"BackTop",
    data(){
        return{
          show: false
          // bgImg: require('../')
        }
    },
    mounted() {
        // 获取页面高度
        const winHeight = document.documentElement.clientHeight;
        // 监听滚动事件
        window.addEventListener("scroll",() => {
            // 获取滚动高度
            let scrollHeight = document.documentElement.scrollTop;
            if(scrollHeight >= winHeight){
                this.show = true;
            }else{
                this.show = false;
            }
        })
    },
    methods:{
        clickBackHandler(){
            document.documentElement.scrollTop = 0;
        }
    }
}
</script>

<style scoped>

.th-back-top {
  position: fixed;
  right: 15px;
  bottom: 104px;
  height: 39px;
  width: 80px;
  z-index: 0;
  opacity: 0.8;
  text-align: right;
}

.bg-back2top2 {
  display: inline-block;
  background: url('../../assets/backTop.jpg')
    no-repeat 0 0;
  -webkit-background-size: 39px 39px;
  background-size: 39px 39px;
  width: 39px;
  height: 39px;
  /*background-color: #000000;*/
}


</style>

